import * as React from "react";
import {Button, DatePicker, Select} from "antd";
import moment from "moment";
import "./index.less";

export interface AlarmManageConditionProps {
    alarmTypeData: [];
    query:(paramJson: AlarmManageConditionParam) => any;
}

export interface AlarmManageConditionState {}

export interface AlarmManageConditionParam {
    alarmType: number;
    start: number;
    end: number;
}

const {Option} = Select;
const RangePicker:any= DatePicker.RangePicker;

class AlarmManageCondition extends React.Component<AlarmManageConditionProps, AlarmManageConditionState> {
    private alarmType: number = 0;
    private start: number = moment().subtract(7, 'day').startOf("day").valueOf();
    private end: number = moment().endOf("day").valueOf();

    render() {
        return (
            <div className="Condition">
                <div className="rowcon_body">
                    <div className="paramRow">
                        <div>
                            报警类型：
                            <Select className="type" defaultValue={0} onChange={value => {this.alarmType = value;}}>
                                <Option value={0} key={0}>全部</Option>
                                {this.props.alarmTypeData.map((item: any) => {
                                    return (
                                        <Option value={item.id} key={item.id}>
                                            {item.name}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </div>
                        <div className="time">
                            报警时段：
                            <RangePicker
                                defaultValue={[moment(this.start),moment(this.end)]}
                                onChange={(dates) => {
                                    if(dates && dates[0] && dates[1]){
                                        this.start = moment(dates[0]).startOf("day").valueOf();
                                        this.end = moment(dates[1]).endOf("day").valueOf();
                                    }else {
                                        this.start = 0;
                                        this.end = 0;
                                    }
                                }}
                            />
                        </div>
                        <Button
                            className="btn"
                            type="primary"
                            onClick={() => {
                                this.props.query({
                                    alarmType: this.alarmType,
                                    start: this.start,
                                    end: this.end
                                });
                            }}
                        >
                            查询
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}
export default AlarmManageCondition;